'use client';

import React from 'react';
import { Button, Card, Space, Typography } from 'antd';
import { CodeOutlined, RocketOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

interface WelcomeCardProps {
  title?: string;
  description?: string;
  onGetStarted?: () => void;
  onViewDocs?: () => void;
}

export const WelcomeCard: React.FC<WelcomeCardProps> = ({
  title = '欢迎使用 PingCode Web',
  description = '这是一个基于 Next.js + Ant Design 构建的现代化 Web 应用框架',
  onGetStarted,
  onViewDocs,
}) => {
  return (
    <Card
      className="w-full max-w-2xl mx-auto shadow-lg hover:shadow-xl transition-shadow duration-300"
      styles={{ body: { padding: '2rem' } }}
    >
      <div className="text-center">
        <RocketOutlined className="text-5xl text-blue-500 mb-4" />
        <Title level={2} className="!mb-4">
          {title}
        </Title>
        <Paragraph className="text-lg text-gray-600 mb-6">{description}</Paragraph>
        <Space size="large">
          <Button
            type="primary"
            size="large"
            icon={<RocketOutlined />}
            onClick={onGetStarted}
            className="h-12 px-8"
          >
            快速开始
          </Button>
          <Button size="large" icon={<CodeOutlined />} onClick={onViewDocs} className="h-12 px-8">
            查看文档
          </Button>
        </Space>
      </div>
    </Card>
  );
};

export default WelcomeCard;
